<template>
	<view class="extension-index"	:style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/shop_uniapp/extension/index_bg.png') + ')' }">
		<view class="show-code-c">
			<view class="show-code-box">
				<view class="invite-tit">您的邀请码</view>
				<view class="invite-code">{{invite_code}}</view>
				<view class="invite-copy" @click="$util.copy(invite_code)">复制</view>
				<view class="invite-btn" @click="openSharePopup()">邀请商家</view>
				<view class="invite-log" @click="$util.redirectTo('./invite_list')">邀请记录</view>
			</view>
		</view>
		<image class="show-code-b" :src="$util.img('/upload/uniapp/shop_uniapp/extension/index_bt.png')" mode="aspectFit"></image>
		
		<!-- 海报 -->
		<view @touchmove.prevent.stop>
			<uni-popup ref="posterPopup" type="bottom" class="poster-layer">
				<template v-if="poster != '-1'">
					<view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
						<view class="image-wrap">
							<image :src="$util.img(poster)" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
						</view>
						<view class="save">长按保存图片</view>
					</view>
					<view class="close iconfont iconclose" @click="closePosterPopup()"></view>
				</template>
				<view v-else class="msg">{{ posterMsg }}</view>
			</uni-popup>
		</view>
		
		<!-- 分享弹窗 -->
		<uni-popup ref="sharePopup" type="bottom" class="share-popup">
			<view>
				<view class="share-title">分享</view>
				<view class="share-content">
					<view class="share-box" @click="copyUrl">
						<button class="share-btn" :plain="true">
							<view class="iconfont iconfuzhilianjie"></view>
							<text>复制链接</text>
						</button>
					</view>
					<view class="share-box" @click="openPosterPopup">
						<button class="share-btn" :plain="true">
							<view class="iconfont iconpengyouquan"></view>
							<text>生成分享海报</text>
						</button>
					</view>
				</view>
				<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { Weixin	} from '@/common/js/wx-jssdk.js';
	export default {
		data() {
			return {
				invite_code: '',
				poster: "-1", //海报
				posterMsg: "", //海报错误信息
				posterHeight: 0,
				share_url: ''
			}
		},
		methods: {
			getShopCode() {
				this.$api.sendRequest({
					url: '/shopapi/inviteCode/getShopCode',
					data: {},
					success: res => {
						if (res.code == 0 && res.data) {
							this.invite_code = res.data.invite_code;
							this.share_url = this.$config.h5Domain + '/pages/apply/register?invite_code='+this.invite_code;
						} else {
							this.$util.showToast({
								title: res.message
							});
							setTimeout(() => {
								this.$util.redirectTo('/pages/index/index', {}, 'redirectTo');
							}, 1000);
						}
					}
				});
			},
			//-------------------------------------分享-------------------------------------
			// 打开分享弹出层
			openSharePopup() {
				this.$refs.sharePopup.open();
			},
			// 关闭分享弹出层
			closeSharePopup() {
				this.$refs.sharePopup.close();
			},
			//-------------------------------------海报-------------------------------------
			//复制链接
			copyUrl() {
				var shop_info = uni.getStorageSync('shop_info') ? JSON.parse(uni.getStorageSync('shop_info')) : null;
				let text = '【' + shop_info.site_name + '】邀您注册商户，快来看看吧。' + this.share_url;
				if (this.memberId) text += '&source_member=' + this.memberId;
				this.$util.copy(text, () => {
					this.closeSharePopup();
				});
			},
			// 打开海报弹出层
			openPosterPopup() {
				this.getGoodsPoster();
				this.$refs.sharePopup.close();
				this.$refs.posterPopup.open();
				if (this.poster != '-1') {
					setTimeout(() => {
						let view = uni.createSelectorQuery().in(this).select(".poster-layer .image-wrap");
						view.fields({
							size: true,
						}, data => {
							let posterWhith = data.width;
							let ratio = parseFloat((740 / posterWhith).toFixed(2));
							if (uni.getStorageSync('token')) {
								this.posterHeight = parseInt(1120 / ratio);
							} else {
								this.posterHeight = parseInt(1100 / ratio);
							}
						}).exec();
					}, 100);
				}
			},
			// 关闭海报弹出层
			closePosterPopup() {
				this.$refs.posterPopup.close();
			},
			//生成海报
			getGoodsPoster() {
				//活动海报信息
				this.$api.sendRequest({
					url: "/shopapi/inviteCode/poster",
					data: {
						page: this.share_url
					},
					success: res => {
						if (res.code == 0) {
							this.poster = res.data.path + "?time=" + new Date().getTime();
						} else {
							this.posterMsg = res.message;
						}
					}
				});
			},
			
		},
		onLoad() {
			this.getShopCode();
		}
	}
</script>

<style lang="scss">
.extension-index {
	position: relative;
	width: 750upx;
	height: 1532upx;
	background-size: 750upx 1532upx;
	background-repeat: no-repeat;
	background-position: left top;
	
	.show-code-c {
		position: absolute;
		width: 680upx;
		height: 648upx;
		background: #FFD4B6;
		border-radius: 20upx;
		left: 35upx;
		top: 520upx;

		.show-code-box {
			width: 610upx;
			height: 578upx;
			background: #FFFFFF;
			border-radius: 20upx;
			margin: 35upx;
			text-align: center;
			overflow: hidden;
			
			.invite-tit {
				height: 45upx;
				font-size: 32upx;
				color: #808080;
				line-height: 45upx;
				margin-top: 45upx;
			}
			.invite-code {
				height: 90upx;
				font-size: 64upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF6A00;
				line-height: 90upx;
				margin-top: 16upx;
			}
			.invite-copy {
				height: 45upx;
				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF6A00;
				line-height: 45upx;
				margin-top: 16upx;
				text-decoration:underline;
			}
			.invite-btn {
				margin-top: 68upx;
				margin-left: 45upx;
				width: 520upx;
				height: 88upx;
				line-height: 88upx;
				background: linear-gradient(360deg, #FF3920 0%, #FFA602 100%);
				border-radius: 51upx;
				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.invite-log {
				margin-top: 32upx;
				margin-left: 45upx;
				width: 520upx;
				height: 88upx;
				line-height: 88upx;
				border-radius: 51upx;
				border: 2px solid #FF6A00;
				font-size: 32upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FF6A00;
			}
		}
	}
	.show-code-b {
		position: absolute;
		top: 1232upx;
		left: 56upx;
		width: 637upx;
		height: 213upx;
	}
}

// 海报
// .uni-popup__wrapper-box
.poster-layer {
	.generate-poster {
		padding: 40rpx 0;
		.iconfont {
			font-size: 80rpx;
			color: #07c160;
			line-height: initial;
		}
		> view {
			text-align: center;
			&:last-child {
				margin-top: 20rpx;
			}
		}
	}
	.image-wrap {
		width: 70%;
		margin: 30px auto 20px auto;
		box-shadow: 0 0 16px rgba(100, 100, 100, 0.3);
		image {
			width: 100%;
			height: 100%;
			height: 750rpx;
		}
	}
	.msg {
		padding: 40rpx;
	}
	.save {
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
	}
	.close {
		position: absolute;
		top: 0;
		right: 20rpx;
		width: 40rpx;
		height: 80rpx;
		font-size: 50rpx;
	}
}
.share-popup,
.uni-popup__wrapper-box {
	.share-title {
		line-height: 60rpx;
		font-size: $font-size-toolbar;
		padding: 15rpx 0;
		text-align: center;
	}

	.share-content {
		display: flex;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 80rpx 15rpx;

		.share-box {
			flex: 1;
			text-align: center;

			.share-btn {
				margin: 0;
				padding: 0;
				border: none;
				line-height: 1;
				height: auto;
				text {
					margin-top: 20rpx;
					font-size: $font-size-tag;
					display: block;
					color: $color-title;
				}
			}

			.iconfont {
				font-size: 80rpx;
				line-height: initial;
			}
			.iconfuzhilianjie,
			.iconpengyouquan,
			.iconhaowuquan,
			.iconiconfenxianggeihaoyou {
				color: #FF6A00;
			}
		}
	}

	.share-footer {
		height: 90rpx;
		line-height: 90rpx;
		border-top: 2rpx solid $color-line;
		text-align: center;
	}
	
	.iconpengyouquan:before {
	  content: "\e6e9";
	}
	
	.iconfuzhilianjie:before {
	  content: "\e6e5";
	}
}
</style>
